<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${user.username }</title>
</head>
<body>
	<div class="row">
		<div class="col-md-8">
			<div class="panel panel-default">
				<div class="panel-body">
					<div class="media">
						<div class="media-left">
							<img src="${user.avatar }" width="100px" height="100px" class="img-rounded">
						</div>
						<div class="media-body">
							<h1 class="media-heading" style="font-size: 54px">&nbsp;&nbsp;${user.username }
							</h1>
						</div>
					</div>
					<br>
					<ul class="nav nav-tabs">
						<li <c:if test="${operate == 0 }">class="active"</c:if>><a
							href="user/${user.id }/setting">基本资料</a></li>
						<li <c:if test="${operate == 1 }">class="active"</c:if>><a
							href="user/${user.id }/1/setting">修改头像</a></li>
						<li <c:if test="${operate == 2 }">class="active"</c:if>><a
							href="user/${user.id }/2/setting">修改密码</a></li>
						<li <c:if test="${operate == 3 }">class="active"</c:if>><a
							href="user/${user.id }/3/setting">修改注册邮箱</a></li>
					</ul>

				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-8">
			<div class="list-group">
				<c:if test="${operate == 0 }">
					<div class="panel panel-info">
						<h2>
							&nbsp;<strong>邮箱:</strong> ${user.email }
						</h2>
						<br>
					</div>
				</c:if>
				<c:if test="${operate == 1 }">
					<div class="panel panel-default">
						<div class="panel-body">

							<div class="col-sm-3" align="center" style="padding-top: 50px">
								<img src="${user.avatar }" alt="头像" width="100px" height="100px"
									class="img-rounded">
							</div>
							<form action="user/updateAvatar" method="post"
								enctype="multipart/form-data">
								<div class="col-sm-6">
									<div class="panel panel-info" align="center"
										style="background-image: url(resources/images/bg.jpg)">
										<br> <br> <a href="javascript:;" class="a-upload"
											onchange="javascript:setImagePreview();"><span
											class="glyphicon glyphicon-picture"></span>&nbsp;选择图片 <input
											id="fileId1" type="file"
											accept="image/png,image/gif,image/jpeg" name="file" /> </a> <br>
										<br> <br> <a href="javascript:;" class="a-upload"><span
											class="glyphicon glyphicon-camera"></span>&nbsp;拍摄照片 <input
											id="fileId1" type="file" accept="image/png,image/gif"
											 /> </a> <br> <br>

									</div>
								</div>

								<input type="hidden" name="id" value="${user.id }">
								<div data-role="fieldcontain">

									<div id="localImag">
										<img id="preview" width="-1" height="-1" style="display: none" />
									</div>
								</div>
								<br>
								<div id="DivUp" style="display: none">
									<button type="submit" data-inline="true" data-mini="true"
										class="btn btn-default btn-lg" id="BtnUp" value="确认上传">&nbsp;&nbsp;&nbsp;&nbsp;修改头像&nbsp;&nbsp;&nbsp;&nbsp;</button>
								</div>
							</form>

						</div>
					</div>
				</c:if>
				<c:if test="${operate == 2 }">
					<div class="panel panel-default">
						<div class="panel-body">
							<c:if test="${Change}">
								<div class="alert alert-success alert-dismissible" role="alert">
									密码已更改</div>
							</c:if>
							<form class="form-horizontal" action="user/updatePassword/old">
								<div class="form-group">
									<label for="oldPassword" class="col-sm-2 control-label">当前密码</label>
									<div class="col-sm-6">
										<input type="hidden" name="id" value="${user.id }"> <input
											type="password" class="form-control" name="oldPassword"
											placeholder="输入当前的密码">
									</div>
								</div>
								<div class="form-group">
									<label for="newPassword1" class="col-sm-2 control-label">新密码</label>
									<div class="col-sm-6">
										<input type="password" class="form-control"
											name="newPassword1" placeholder="请输入新密码">
									</div>
								</div>
								<div class="form-group">
									<label for="newPassword2" class="col-sm-2 control-label">当前密码</label>
									<div class="col-sm-6">
										<input type="password" class="form-control"
											name="newPassword2" placeholder="请再次输入新密码">
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-2"></div>
									<div class="col-sm-2">
										<button type="submit" class="btn btn-default btn-lg">更改密码</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</c:if>
				<c:if test="${operate == 3 }">
					<div class="panel panel-default">
						<div class="panel-body">
							<c:if test="${Change}">
								<div class="alert alert-success alert-dismissible" role="alert">
									邮箱已更改</div>
							</c:if>
							<form class="form-horizontal" action="user/updateEmail"
								method="post">
								<div class="form-group">
									<input type="hidden" value="${user.id }" name="id"> <label
										for="oldPassword" class="col-sm-2 control-label">当前邮箱地址</label>
									<label for="oldPassword" class="col-sm-2 control-label"
										id="oldEmail">${user.email }</label>
								</div>
								<div class="form-group">
									<label for="newEmail1" class="col-sm-2 control-label">新邮箱地址</label>
									<div class="col-sm-4">
										<input type="text" class="form-control" id="email"
											placeholder="请输入新的邮箱" name="email">
									</div>
									<div class="col-sm-1">
										<a class="btn btn-default" id="sendCheck">发送验证码</a>
									</div>
								</div>

								<div class="form-group">
									<label for="check" class="col-sm-2 control-label">验证码</label>
									<div class="col-sm-6">
										<input type="text" class="form-control" id="check"
											name="checkCode" placeholder="输入收到的验证码">
									</div>
								</div>
								<div class="form-group">
									<div class="col-sm-2"></div>
									<div class="col-sm-2">
										<button type="submit" class="btn btn-default btn-lg">修改邮箱</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</c:if>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$("#sendCheck").click(function() {
			$.get("user/sendCheck", {
				email : $("#email").val()
			});
			var count = 30;
			var countdown = setInterval(CountDown, 1000);
			function CountDown() {
				$("#sendCheck").attr("disabled", true);
				$("#sendCheck").text(count + "秒后重新发送");
				if (count == 0) {
					$("#sendCheck").text("重新发送");
					$("#sendCheck").val("Submit").removeAttr("disabled");
					clearInterval(countdown);
				}
				count--;
			}
		});

		function setImagePreview() {
			var preview, img_txt, localImag, file_head = document
					.getElementById("fileId1"), picture = file_head.value;
			if (!picture.match(/.jpg|.gif|.png|.bmp/i))
				return alert("您上传的图片格式不正确，请重新选择！"), !1;
			if (preview = document.getElementById("preview"), file_head.files
					&& file_head.files[0])
						preview.style.display = "block",
						preview.style.width = "150px",
						preview.style.height = "150px",
						preview.src = window.navigator.userAgent
								.indexOf("Chrome") >= 1
								|| window.navigator.userAgent.indexOf("Safari") >= 1 ? window.webkitURL
								.createObjectURL(file_head.files[0])
								: window.URL
										.createObjectURL(file_head.files[0]);
			else {
				file_head.select(), file_head.blur(),
						img_txt = document.selection.createRange().text,
						localImag = document.getElementById("localImag"),
						localImag.style.width = "63px",
						localImag.style.height = "63px";
				try {
							localImag.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)",
							localImag.filters
									.item("DXImageTransform.Microsoft.AlphaImageLoader").src = img_txt
				} catch (f) {
					return alert("您上传的图片格式不正确，请重新选择！"), !1
				}
				preview.style.display = "none", document.selection.empty()
			}
			return document.getElementById("DivUp").style.display = "block", !0
		}
	</script>

</body>

</html>